import React, {Component} from 'react';
import {Input, Select, Form} from 'antd';


const FormItem = Form.Item;
const Option = Select.Option;

class GameInfoForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            options: ''
        };
    }

    componentDidMount() {
        let gameTypeInfo = this.props.gameTypeInfo;
        const options = gameTypeInfo.map(d => <Option key={d.gameType}>{d.gameTypeName}</Option>);
        this.setState({
            options: options
        });
    }

    /*filterOption(input, option) {
        console.log(input);
        console.log(option);
    }*/


    render() {
        const showSearch = true;
        let {getFieldDecorator} = this.props.form;
        let gameInfo = this.props.gameInfo;
        return (
            <Form layout="vertical">
                <FormItem label="游戏名称">
                    {getFieldDecorator('gameName', {
                        initialValue: gameInfo.gameName,
                        rules: [{required: true, message: 'Please input the title of collection!'}],
                    })(
                        <Input/>
                    )}
                </FormItem>
                <FormItem label="游戏类型">
                    {getFieldDecorator('gameType', {
                        initialValue: gameInfo.gameType,
                        rules: [{required: true, message: 'Please input the title of collection!'}],
                    })(
                        <Select combobox showSearch={showSearch}
                                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}>
                            {this.state.options}
                        </Select>
                    )}
                </FormItem>
            </Form>
        );
    }
}

let gameInfoForm = Form.create()(GameInfoForm);
export default gameInfoForm
